<template>
  <header>
    <div class="rab_top">
      <div class="rab_top_width">
        <div @click="goPage('gameList')" class="rab-logo">
          <a href="javascript:;">
            <img src="../../assets/image/rablogo.png" alt="">
          </a>
        </div>
        <div class="Top_Sharelinks">
          <p class="wenzi">
            <span class="Top_Sharelinks-icon">
              <i @click="showWeiXinQrCode" class="iconfont icon-weixin"></i>
              <i @click="toggleShowEmail" class="iconfont icon-youjianduanxin"></i>
              <!--<i class="iconfont icon-zhifeiji"></i>-->
            </span>
          </p>
        </div>
        <div v-show="showQrcode || showEmail" class="foot-tip" style="display: none;">
          <div v-show="showQrcode" class="weichart-cont">
            <img :src="$config.footWechartQrcode" />
            <div>Weichart</div>
          </div>
          <div v-show="showEmail" class="email-cont">{{$config.footEmail}}</div>
        </div>
        <div class="rab-gamename">
          <!-- <div class="rab-gamename-h">
          <ul>
              <li>炸金花</li>
              <li>骰宝</li>
              <li>德州扑克</li>
          </ul>
      </div> -->
        </div>
        <div class="rab-language">
          <ul>
            <li>
              <!--<img src="../../assets/image/guojia.png" alt="">-->
              <img v-if="curLang == 'en'" src="../../assets/image/england.png" alt="">
              <img v-if="curLang == 'tw'" src="../../assets/image/guojia.png" alt="">
              <img v-if="curLang == 'zh'" src="../../assets/image/zh.jpg" alt="">
            </li>
            <select name="" @change="selectLang" v-model="curLang" >
              <!--<option value="zh">中文</option>-->
              <option value="en">English</option>
              <option value="zh">简体中文</option>
              <option value="tw">繁體中文</option>
            </select>
          </ul>
          <i class="iconfont icon-downdot "></i>
        </div>
        <div class="rab-menu">
          <i class="iconfont icon-jianjie" v-if="isMobile" @click="showMoreFun"></i>
        </div>
        <div class="rab-menu-content-width" v-if="!isMobile" >
          <ul class="">
            <a @click="showDividend" href="javascript:;"><li >{{$t('header.dividend')}}</li></a>
            <a @click="showInvite" href="javascript:;"><li >{{$t('header.invite_reward')}}</li></a>
            <a @click="showRules" href="javascript:;"><li >{{$t('header.intr_play')}}</li></a>
            <a @click="goPage('notice')" href="javascript:;">
              <li>{{$t('header.notice')}}</li>
            </a>
            <a @click="goPage('preSell')" v-if="showPreSell" href="javascript:;">
              <li>{{$t('header.pre_sell')}}</li>
            </a>
            <a @click="login" v-if="!account" href="javascript:;">
              <li>
                <span class="rab-login">{{$t('header.login')}}</span>
              </li>
            </a>
            <li v-if="account">
              <span class="name-btn">{{account && account.name}}</span>
              <span @click="logOut" class="name-btn"><i class="iconfont icon-tuichu"> </i></span>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <div class="rab-menu-content" v-show="showDes && isMobile">
      <ul class="bot">
        <li @click="showDividend">{{$t('header.dividend')}}</li>
        <li @click="showInvite">{{$t('header.invite_reward')}}</li>
        <li @click="showRules">{{$t('header.intr_play')}}</li>
      </ul>
      <ul>
        <a  @click="goPage('notice')" href="javascript:;">
          <li>{{$t('header.notice')}}</li>
        </a>
        <a v-if="showPreSell" @click="goPage('preSell')" href="javascript:;">
          <li>{{$t('header.pre_sell')}}</li>
        </a>
        <!--<a v-show="otherData && otherData.canraise != 0" @click="goPage('preSell')" href="javascript:;">-->
          <!--<li>{{$t('header.pre_sell')}}</li>-->
        <!--</a>-->
        <a href="javascript:;">
          <li>
            <span v-if="!account" @click="login" class="rab-login">{{$t('header.login')}}</span>
            <span class="name-btn" v-if="account">{{account && account.name}}</span>
            <span @click="logOut" class="name-btn" v-if="account"><i class="iconfont icon-tuichu"> </i></span>
          </li>
        </a>
      </ul>
    </div>
    <rule-comt ref="rule"></rule-comt>
    <invite-comt ref="invite"></invite-comt>
    <dividend-comt ref="dividend"></dividend-comt>
  </header>

</template>

<script>
import { mapActions } from 'vuex'
import RuleComt from '../../components/ruleComt.vue'
import InviteComt from '../../components/inviteComt.vue'
import Dividend from '../../components/dividend.vue'
export default {
  name: 'headerContent',
  data: function () {
    return {
      showDes: false,
      scatter: null,
      otherData: null,
      curLang: this.$utils.getLanguage(),
      showQrcode: false,
      showEmail: false,
      showPreSell: true,
      presellEndCD: null
    }
  },
  components: {
    'rule-comt': RuleComt,
    'invite-comt': InviteComt,
    'dividend-comt': Dividend
  },
  computed: {
    lang: function () {
      // this.curLang = this.$store.getters.getLang
      return this.$store.getters.getLang
    },
    account: function () {
      return this.$store.getters.getAccount
    },
    isMobile: function () {
      return this.$store.getters.getIsMobile
    },
    difTime () {
      return this.$store.getters.getDifTime
    }
  },
  watch: {
    lang (val) {
      this.curLang = val
    },
    difTime (val) {
      // this.initShowPreSell(val)
    }
  },
  created () {
    this.autoLogin()
    this.getOtherData()
    // this.initShowPreSell(this.difTime)
  },
  methods: {
    ...mapActions([
      'setLang', 'setAccountData'
    ]),
    handleCommand (command) {
      this.setLang(command)
      console.log(this.$store.state.lang)
    },
    showMoreFun () {
      this.showDes = !this.showDes
    },
    showRules () {
      // this.$emit(RuleComt, 'toggleShowRule')
      this.$refs.rule.toggleShowRule()
    },
    showInvite () {
      console.log(this.$refs)
      this.$refs.invite.toggleShow()
    },
    showDividend () {
      this.$refs.dividend.toggleShowDivi()
    },
    goPage (name) {
      console.log('go: ', name)
      this.$router.push({name: name})
    },
    selectLang (evt) {
      // console.log(evt.target.value)
      this.setLang(evt.target.value)
    },
    async login () {
      console.log('start login !1')
      let connected = await this.$scatterJs.scatter.connect(this.$config.gameName)
      if (!connected) {
        console.log('unconnected !')
        return
      }
      if (!this.scatter) {
        this.scatter = this.$scatterJs.scatter
      }
      // let anthRes = await this.scatter.login({accounts: [this.$config.network]})
      let anthRes = await this.scatter.getIdentity({accounts: [this.$config.network]})
      // this.setAccountData(res.accounts[0])
      // console.log('anthRes', anthRes)
      // console.log('identity: ', this.scatter.identity)
      // var isLogged = await this.hasLogged(anthRes.accounts[0].name)
      this.setAccountData(anthRes.accounts[0])
      this.$utils.isLogin(anthRes.publicKey)
      // var inviter = localStorage.getItem('rab_ivt') || ''
      /* console.log('islogged: ', isLogged)
      var inviter = localStorage.getItem('rab_ivt') || ''
      let eos = this.scatter.eos(this.$config.network, this.$eosjs)
      try {
        let res = await eos.transaction({
          actions: [{
            account: this.$config.cont_owner,
            name: 'login',
            authorization: [{
              actor: anthRes.accounts[0].name,
              permission: anthRes.accounts[0].authority
            }],
            data: {
              name: anthRes.accounts[0].name,
              referrer: inviter
            }
          }]
        })
        this.setAccountData(anthRes.accounts[0])
        this.$utils.isLogin(anthRes.publicKey)
        console.log('login contract res: ', res)
      } catch (e) {
        console.log('login contract err: ', e)
        if (e.code === 402) {
          this.$message({message: this.$t('header.login_contract_hint'), type: 'error'})
        } else {
          // var errText = this.$utils.getErrorMsg(e)
          // var errText = this.$t('errorCode:' + e.message) || ''
          var errText = this.$t('errCode.' + this.$utils.getErrorCode(e)) || ''
          this.$message({message: errText || this.$t('header.login_fail'), type: 'error'})
        }
      } */
    },
    hasLogged (name) { // 判断是否已经同意过登录合约
      return new Promise((resolve, reject) => {
        console.log('has logged !')
        let eos = this.scatter.eos(this.$config.network, this.$eosjs)
        eos.getTableRows({
          code: this.$config.cont_owner,
          scope: this.$config.cont_owner,
          table: 'userinfo',
          index_position: '2',
          lower_bound: name,
          key_type: 'i64',
          upper_bound: name,
          json: true
        }).then(res => {
          // console.log('userinfo table:', res.rows)
          resolve(res.rows.length > 0)
        }).catch(e => {
          // console.log('userinfo e:', e)
          reject(e)
        })
      })
    },
    async autoLogin () {
      let connected = await this.$scatterJs.scatter.connect(this.$config.gameName)
      if (!connected) {
        console.log('unconnected !')
        return
      }
      if (!this.scatter) {
        this.scatter = this.$scatterJs.scatter
      }
      // console.warn(this.$config.network)
      let anthRes = await this.scatter.getIdentity({accounts: [this.$config.network]})
      this.setAccountData(anthRes.accounts[0])
      this.$utils.isLogin(anthRes.publicKey)
      // if (this.$utils.isLogin(anthRes.publicKey)) {
      //   this.setAccountData(anthRes.accounts[0])
      // }
    },
    async logOut () {
      console.log('log out')
      console.log('this.scatter.identity: ', this.scatter.identity)
      await this.scatter.forgetIdentity()
      this.setAccountData(null)
    },
    async getOtherData () {
      await this.$scatterJs.scatter.connect(this.$config.gameName)
      let eos = this.$scatterJs.scatter.eos(this.$config.network, this.$eosjs)
      eos.getTableRows({
        code: this.$config.cont_owner,
        scope: this.$config.cont_owner,
        table: 'other',
        json: true
      }).then(res => {
        this.otherData = res.rows[0]
        console.log('table:', this.otherData)
      }).catch(e => {
        console.log('other table e:', e)
      })
    },
    showWeiXinQrCode () {
      if (this.$config.footWechartQrcode) {
        this.showQrcode = !this.showQrcode
        if (this.showQrcode) this.showEmail = false
      }
    },
    toggleShowEmail () {
      if (this.$config.footEmail) {
        this.showEmail = !this.showEmail
        if (this.showEmail) this.showQrcode = false
      }
    },
    initShowPreSell (val) {
      if (this.presellEndCD) {
        clearInterval(this.presellEndCD)
        this.presellEndCD = null
      } else {
        this.presellEndCD = setInterval(() => {
          let endTime = this.$config.preSellTimestamp * 1000
          let curServiceTime = new Date().getTime() - val
          if (endTime > curServiceTime) {
            this.showPreSell = true
          } else {
            this.showPreSell = false
          }
        }, 60000)
        let endTime = this.$config.preSellTimestamp * 1000
        let curServiceTime = new Date().getTime() - val
        if (endTime > curServiceTime) {
          this.showPreSell = true
        } else {
          this.showPreSell = false
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .Sharelinks {
    position: relative;
  }
  .foot-tip {
    position: absolute;
    top: 46px;
    left: 120px;
    z-index: 2;
  }
  .weichart-cont{
    background-color: #999;
    border: 2px solid #999;;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
  }
  .weichart-cont>img {
    height: 140px;
    width: 140px;
  }
  .weichart-cont>div{
    /*background-color: rgba(0,0,0,0.6);*/
    font-size: 14px;
    color: #fff;
  }
  .email-cont {
    background-color: rgba(255,255,255,0.85);
    line-height: 30px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
  }
</style>
